<template>
  <div class="container">
    公司列表
    <a-button type="primary" @click="visible = true">添加公司</a-button>
    <!-- 公司的列表数据 -->
    <a-table :columns="columns" :data="data" :pagination="false">
      <template #stack="{ record }">
        <a-space>
          <a-tag
            v-for="(item, index) of record.stack.split(',')"
            :key="index"
            :color="stackColor(item)"
            >{{ item }}</a-tag
          >
        </a-space>
      </template>

      <template #action="{ record }">
        <a-button>编辑</a-button>
        <a-popconfirm content="别了吧？" @ok="handleDel(record)">
          <a-button>删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>
    <a-pagination
      :total="total"
      show-page-size
      @change="handlePageChange"
      @page-size-change="handleSizeChange"
    />

    <!-- 添加的弹窗 -->
    <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
      <template #title> 添加公司 </template>
      <!-- 新增的表单 -->
      <a-form ref="myform" :model="form">
        <a-form-item
          :rules="[{ required: true, message: '公司名称不能为空' }]"
          :validate-trigger="['change', 'input']"
          field="name"
          tooltip="请输入公司的名称"
          label="名称"
        >
          <a-input v-model="form.name" placeholder="公司的名称" />
        </a-form-item>
        <a-form-item field="stack" tooltip="公司的主要技术栈" label="技术栈">
          <a-checkbox-group v-model="form.stack" :options="options" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
  import { defineComponent } from 'vue';
  import { addCompany, getCompany, delCompany } from '@/api/company';

  export default defineComponent({
    data() {
      return {
        visible: false,
        form: {
          name: '',
          stack: '',
        },
        columns: [
          {
            title: '公司名称',
            dataIndex: 'name',
          },
          {
            title: '公司的主要技术栈',
            slotName: 'stack',
          },
          {
            title: '操作',
            slotName: 'action',
          },
        ],
        data: [],
        limit: 10,
        page: 1,
        total: 0,
        name: '',
        options: [
          { label: 'vue', value: 'vue' },
          { label: 'react', value: 'react' },
          { label: 'angular', value: 'angular' },
          { label: 'uniapp', value: 'uniapp' },
          { label: 'taro', value: 'taro' },
          { label: 'rn', value: 'rn' },
          { label: 'electron', value: 'electron' },
        ],
      };
    },
    created() {
      this.getList();
    },
    methods: {
      stackColor(stack) {
        if (stack === 'vue') return 'green';
        if (stack === 'angular') return 'red';
        if (stack === 'uniapp') return 'cyan';
        return '';
      },
      async getList() {
        const params = {
          $limit: this.limit,
          $skip: (this.page - 1) * this.limit,
        };

        if (this.name) params.params = this.name;

        const res = await getCompany(params);
        console.log('查询公司列表的内容', res);
        this.data = res.data.data;
        this.total = res.data.total;
      },
      async handleOk() {
        const err = await this.$refs.myform.validate();
        if (!err) {
          const res = await addCompany({
            name: this.form.name,
            stack: this.form.stack.join(),
          });

          const { status } = res;
          if (status === 201) return this.$message.success('添加成功');
        }

        return '';
      },
      handleCancel() {},
      handleSubmit() {},
      handlePageChange(val) {
        this.page = val;
        this.getList();
      },
      handleSizeChange(size) {
        this.limit = size;
        this.getList();
      },
      async handleDel(record) {
        const res = await delCompany(record.id);
        const { status } = res;
        if (status === 200) {
          this.$message.success('删除成功');
          this.getList();
        }
      },
    },
  });
</script>

<style scoped>
  .container {
    padding: 20px;
  }
</style>
